<script setup>
import {ref,useTemplateRef,provide} from 'vue'
import axios from 'axios';
import { useRouter,RouterLink} from 'vue-router';
import { showMsg } from '@/components/Util';
let router=useRouter();//路由对象 用来做路由跳转
let username=ref('')
let password=ref('')
let rememberme=ref(false)
function login(){
    if(username.value && password.value){
        let data=new FormData();
        data.append('username',username.value);
        data.append('password',password.value);
        data.append('rememberMe',rememberme.value);
        axios.post('/api/login',data).then(res=>{
            console.log(res);
            if(res.data.status==200){
                showMsg("登录成功",'info')
                localStorage.setItem('isLoggedIn', 'true');
                router.push("/");
            }else{
                showMsg(res.data.msg,'error',2000);
            }
        })
    }else{
        showMsg('表单填写不完整','warn',2000);
    }
}
</script>

<template>
<div class="box">
    <div class="title">学籍管理系统</div>
    <input class="kuang zh" type="text" v-model="username" placeholder="用户名" />
    <input class="kuang ma" type="password" v-model="password" placeholder="密码" />
    <div class="jz">
        <label><input type="checkbox" name="rememberMe" v-model="rememberme" />记住密码</label>
        <sapn>忘记密码?</sapn>
    </div>
    <input class="dl" type="button" value="登录→" @click="login"/>
    <span><router-link to="/ss" style="text-decoration: none; color: white;">注册</router-link></span>
    <img class="bj" src="" alt="">
</div>
</template>

<style scoped>
*{
    padding: 0;
    margin: 0;
}
.box{
    width: 300px;
    height: 300px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    background:url("@/assets/beijing.png") no-repeat;
    background-size: contain;
    color: white;
}
.title{
    height: 30px;
    font-size: 22px;
    line-height: 30px;
    text-align: center;
}
.kuang{
    width: 80%;
    height: 35px;
    border-radius: 20px;
    border: none;
    outline: none;
    color: white;
    padding-left: 30px;
    background-color: rgb(12, 20, 41) !important;
}
.zh{
     background-image: url("../assets/用户.png");
    background-size: 17px;
    background-repeat: no-repeat;
    background-position: 9px;
}
.ma{
    background-image: url("../assets/密码.png");
    background-size: 17px;
    background-repeat: no-repeat;
    background-position: 9px;
}
.jz{
    width: 85%;
    display: flex;
    justify-content: space-between;
}
.dl{
    width: 80%;
    height: 35px;
    border-radius: 25px;
}
</style>